<template>
  <view v-if="!isLoading" class="container b-f p-b">
    <u-navbar
      height="50"
      title-size="36"
      :is-back="true"
      title="公告详情"
      :border-bottom="false"
    ></u-navbar>
    <u-gap height="20" bg-color="#EEEEEF"></u-gap>
    <view style="padding: 30rpx 20rpx">
      <view class="article-title dis-flex flex-x-center">
        <text class="f-32">{{ detail.title }}</text>
      </view>
      <view class="article-little dis-flex flex-x-center">
        <view class="article-little__right">
          <text class="article-views f-24 col-8">{{
            $u.timeFormat(detail.createTime, 'yyyy年mm月dd日 hh时MM分')
          }}</text>
        </view>
      </view>
      <u-line height="1rpx" color="#E6E6E6"></u-line>
      <view class="article-content m-top20">
        <u-parse :html="detail.content"></u-parse>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前文章类型
      type: 'notice',
      // 当前文章ID
      articleId: null,
      // 加载中
      isLoading: false,
      // 当前文章详情
      detail: {}
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.type = options.type || 'notice'
    this.articleId = options.articleId
    if (this.type == 'notice') {
      this.getNoticeDetail()
    } else {
      this.getArticleDetail()
    }
  },

  methods: {
    // 获取通知公告详情
    getNoticeDetail() {
      const app = this
      this.$u.get('/app-api/system/notice/get?id=' + app.articleId).then((res) => {
        this.detail = res.data
      })
    },
    // 获取文章详情
    getArticleDetail() {
      const app = this
      this.$u.get('/app-api/cms/article/get?id=' + app.articleId).then((res) => {
        this.detail = res.data
      })
    }
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    const app = this
    // 构建页面参数
    const params = app.$getShareUrlParams({
      type: app.type,
      articleId: app.articleId
    })
    return {
      title: app.detail.title,
      path: '/other/article/detail?' + params
    }
  },

  /**
   * 分享到朋友圈
   * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
   * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
   */
  onShareTimeline() {
    const app = this
    // 构建页面参数
    const params = app.$getShareUrlParams({
      type: app.type,
      articleId: app.articleId
    })
    return {
      title: app.detail.title,
      path: '/other/article/detail?' + params
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  // padding: 20rpx;
  background: #fff;
}

.article-content {
  font-size: 28rpx;
}

.article-title {
  font-weight: 600;
  font-size: 30rpx;
  color: #333333;
  line-height: 36rpx;
  padding-bottom: 10rpx;
}

.article-little {
  font-size: 24rpx;
  color: #999999;
  line-height: 48rpx;
  padding-bottom: 20rpx;
}

.article-content {
  padding: 30rpx 20rpx;
}
</style>
